<div class="singer-scroll-v" fe-role="Switch" fe-cfg="scroll_dir:v">
  <div class="scroll-list">

    <% page = params[:page] ? params[:page].to_i : 1 %>
    <% singers.each_with_index do |row, row_index| %>
      <div class="singer-scroll-h" fe-role="Scroll"
           fe-cfg="scroll_dir:h,scroll_duration:0.3,scroll_easing:ease-out,<%= "default_focus:yes" if row_index === params[:row_index].to_i %>">
        <ul class="scroll-list clearfix">

          <% row.each_with_index do |item, item_index| %>
            <li data-href="<%= singer_path(id: item[:id]) %>"
                data-head="<%= "head" if item_index === 0 %>"
                data-tail="<%= "tail" if item_index === 7 %>"
                data-row_index="<%= row_index %>"
                data-item_index="<%= item_index %>"
                id="<%= "singer-tab-#{row_index * 8 + item_index}" %>"
                class="singer-tab"
                fe-role="Widget"
                fe-cfg="<%= "default_focus:yes" if item_index === params[:item_index].to_i %>"
            >

              <div class="singer-tab-photo">
                <div class="photo-mask"></div>
                <% if page <= 2 %>
                  <%= image_tag("/images/singers/#{item[:name]}.jpeg", class: "singer-tab-photo-img", onerror: "this.onerror=null;this.src='/singer_default.jpg';") %>
                <% else %>
                   <%= image_tag("/singer_default.jpg", class: "singer-tab-photo-img") %>
                <% end %>
              </div>

              <div class="singer-tab-outer">
                <div class="text-mask"></div>
                <div class="marquee-truncate overflow-hidden">
                  <span class="marquee-content"><%= item[:name] %></span>
                </div>
              </div>
              
            </li>
          <% end %>

        </ul>
      </div>
    <% end %>

  </div>
</div>
